<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if IE]>
		<script src="js/html5.js"></script>
		<![endif]-->
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0px;
        background: #1a2866;
        padding: 0px;
      }

      .chromeframe {
        margin: 0.2em 0;

        padding: 0.2em 0;
      }



      a {
        background: #13A3A5;
        padding: 5px;
        margin: 10px;
        display: block;
        font-weight: 100;
        cursor: pointer;
        font-size: 1.5em;
        float: left;
        text-decoration: none;
        font-size: 18px;
        color: white
      }

      /* Start the loader code, first, let's align it the center of screen */
      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -mos-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        /* disable selection and cursor changes */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
      }

      /* Text styles */
      .loader .text {
        position: absolute;
        top: 1.7em;
        left: 0.15em;
        z-index: 5;
        font-size: 2.5em;
        font-weight: 600;
        text-transform: uppercase;
        text-shadow: 0 1px 0 #ccc,
          0 2px 0 #c9c9c9,
          0 3px 0 #bbb,
          0 4px 0 #b9b9b9,
          0 5px 0 #aaa,
          0 6px 1px rgba(0, 0, 0, .1),
          0 0 5px rgba(0, 0, 0, .1),
          0 1px 3px rgba(0, 0, 0, .1),
          0 3px 5px rgba(0, 0, 0, .1),
          0 5px 10px rgba(0, 0, 0, .1),
          0 10px 10px rgba(0, 0, 0, .1),
          0 20px 20px rgba(0, 0, 0, .15);
        white-space: nowrap;
      }

      .loader .text span {
        display: block;
        float: left;
        -webkit-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
        -moz-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
        -ms-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
        -o-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
        animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
        color: #F2F2EF;
      }

      .loader .text span:nth-child(1) {
        -webkit-animation-delay: 0ms;
        -moz-animation-delay: 0ms;
        -ms-animation-delay: 0ms;
        -o-animation-delay: 0ms;
        animation-delay: 0ms;
      }

      .loader .text span:nth-child(2) {
        -webkit-animation-delay: 100ms;
        -moz-animation-delay: 100ms;
        -ms-animation-delay: 100ms;
        -o-animation-delay: 100ms;
        animation-delay: 100ms;
      }

      .loader .text span:nth-child(3) {
        -webkit-animation-delay: 200ms;
        -moz-animation-delay: 200ms;
        -ms-animation-delay: 200ms;
        -o-animation-delay: 200ms;
        animation-delay: 200ms;
      }

      .loader .text span:nth-child(4) {
        -webkit-animation-delay: 300ms;
        -moz-animation-delay: 300ms;
        -ms-animation-delay: 300ms;
        -o-animation-delay: 300ms;
        animation-delay: 300ms;
      }

      .loader .text span:nth-child(5) {
        -webkit-animation-delay: 400ms;
        -moz-animation-delay: 400ms;
        -ms-animation-delay: 400ms;
        -o-animation-delay: 400ms;
        animation-delay: 400ms;
      }

      .loader .text span:nth-child(6) {
        -webkit-animation-delay: 500ms;
        -moz-animation-delay: 500ms;
        -ms-animation-delay: 500ms;
        -o-animation-delay: 500ms;
        animation-delay: 500ms;
      }

      .loader .text span:nth-child(7) {
        -webkit-animation-delay: 600ms;
        -moz-animation-delay: 600ms;
        -ms-animation-delay: 600ms;
        -o-animation-delay: 600ms;
        animation-delay: 600ms;
      }

      /* cube container */
      .rotation {
        width: 12.5em;
        height: 12.5em;
        position: relative;
        overflow: hidden;
        background: #F2F2EF;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -mos-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      svg {
        position: absolute;
        top: 0;
        left: 0;
      }

      svg line {
        stroke-width: 10px;
        fill: none;
        stroke-dasharray: 200px;
      }

      /* Style for line */
      .rotation svg line.top {
        stroke: #DB2F00;
        -webkit-animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -ms-animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -o-animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        animation: topline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
      }

      .rotation svg line.bottom {
        stroke: #DB2F00;
        -webkit-animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -ms-animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -o-animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        animation: bottomline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
      }

      .rotation svg line.left {
        stroke: #13A3A5;
        -webkit-animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -ms-animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -o-animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        animation: leftline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
      }

      .rotation svg line.right {
        stroke: #13A3A5;
        -webkit-animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -moz-animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -ms-animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        -o-animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
        animation: rightline cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.5s infinite;
      }

      /* animation top line */
      @-webkit-keyframes topline {
        0% {
          -webkit-transform: translateX(0px);
        }

        50% {
          -webkit-transform: translateX(-200px);
        }

        100% {
          -webkit-transform: translateX(-400px);
        }
      }

      @-moz-keyframes topline {
        0% {
          -moz-transform: translateX(0px);
        }

        50% {
          -moz-transform: translateX(-200px);
        }

        100% {
          -moz-transform: translateX(-400px);
        }
      }

      @-mos-keyframes topline {
        0% {
          -mos-transform: translateX(0px);
        }

        50% {
          -mos-transform: translateX(-200px);
        }

        100% {
          -mos-transform: translateX(-400px);
        }
      }

      @-o-keyframes topline {
        0% {
          -o-transform: translateX(0px);
        }

        50% {
          -o-transform: translateX(-200px);
        }

        100% {
          -o-transform: translateX(-400px);
        }
      }

      @keyframes topline {
        0% {
          transform: translateX(0px);
        }

        50% {
          transform: translateX(-200px);
        }

        100% {
          transform: translateX(-400px);
        }
      }


      /* animation bottom line */
      @-webkit-keyframes bottomline {
        0% {
          -webkit-transform: translateX(0px);
        }

        50% {
          -webkit-transform: translateX(200px);
        }

        100% {
          -webkit-transform: translateX(400px);
        }
      }

      @-moz-keyframes bottomline {
        0% {
          -moz-transform: translateX(0px);
        }

        50% {
          -moz-transform: translateX(200px);
        }

        100% {
          -moz-transform: translateX(400px);
        }
      }

      @-mos-keyframes bottomline {
        0% {
          -mos-transform: translateX(0px);
        }

        50% {
          -mos-transform: translateX(200px);
        }

        100% {
          -mos-transform: translateX(400px);
        }
      }

      @-o-keyframes bottomline {
        0% {
          -o-transform: translateX(0px);
        }

        50% {
          -o-transform: translateX(200px);
        }

        100% {
          -o-transform: translateX(400px);
        }
      }

      @keyframes bottomline {
        0% {
          transform: translateX(0px);
        }

        50% {
          transform: translateX(200px);
        }

        100% {
          transform: translateX(400px);
        }
      }

      /* animation left line */
      @-webkit-keyframes leftline {
        0% {
          -webkit-transform: translateY(0px);
        }

        50% {
          -webkit-transform: translateY(200px);
        }

        100% {
          -webkit-transform: translateY(400px);
        }
      }

      @-moz-keyframes leftline {
        0% {
          -moz-transform: translateY(0px);
        }

        50% {
          -moz-transform: translateY(200px);
        }

        100% {
          -moz-transform: translateY(400px);
        }
      }

      @-mos-keyframes leftline {
        0% {
          -mos-transform: translateY(0px);
        }

        50% {
          -mos-transform: translateY(200px);
        }

        100% {
          -mos-transform: translateY(400px);
        }
      }

      @-o-keyframes leftline {
        0% {
          -o-transform: translateY(0px);
        }

        50% {
          -o-transform: translateY(200px);
        }

        100% {
          -o-transform: translateY(400px);
        }
      }

      @keyframes leftline {
        0% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(200px);
        }

        100% {
          transform: translateY(400px);
        }
      }

      /* animation right line */
      @-webkit-keyframes rightline {
        0% {
          -webkit-transform: translateY(0px);
        }

        50% {
          -webkit-transform: translateY(-200px);
        }

        100% {
          -webkit-transform: translateY(-400px);
        }
      }

      @-moz-keyframes rightline {
        0% {
          -moz-transform: translateY(0px);
        }

        50% {
          -moz-transform: translateY(-200px);
        }

        100% {
          -moz-transform: translateY(-400px);
        }
      }

      @-mos-keyframes rightline {
        0% {
          -mos-transform: translateY(0px);
        }

        50% {
          -mos-transform: translateY(-200px);
        }

        100% {
          -mos-transform: translateY(-400px);
        }
      }

      @-o-keyframes rightline {
        0% {
          -o-transform: translateY(0px);
        }

        50% {
          -o-transform: translateY(-200px);
        }

        100% {
          -o-transform: translateY(-400px);
        }
      }

      @keyframes rightline {
        0% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-200px);
        }

        100% {
          transform: translateY(-400px);
        }
      }

      /* animation text */
      @-webkit-keyframes text {
        0% {
          -webkit-transform: scale(1, 1);
        }

        40% {
          -webkit-transform: scale(1.4, 1.4);
        }

        70%,
        100% {
          -webkit-transform: scale(1, 1);
        }
      }

      @-moz-keyframes text {
        0% {
          -moz-transform: scale(1, 1);
        }

        40% {
          -moz-transform: scale(1.4, 1.4);
        }

        70%,
        100% {
          -moz-transform: scale(1, 1);
        }
      }

      @-mos-keyframes text {
        0% {
          -mos-transform: scale(1, 1);
        }

        40% {
          -mos-transform: scale(1.4, 1.4);
        }

        70%,
        100% {
          -mos-transform: scale(1, 1);
        }
      }

      @-o-keyframes text {
        0% {
          -o-transform: scale(1, 1);
        }

        40% {
          -o-transform: scale(1.4, 1.4);
        }

        70%,
        100% {
          -o-transform: scale(1, 1);
        }
      }

      @keyframes text {
        0% {
          transform: scale(1, 1);
        }

        40% {
          transform: scale(1.4, 1.4);
        }

        70%,
        100% {
          transform: scale(1, 1);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="loader">
        <span
          class="text"><span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span></span>
        <div class="rotation">
          <svg width="200" height="200">
            <line class="top" x1="-200" y1="0" x2="400" y2="0" />
            <line class="left" x1="0" y1="0" x2="0" y2="-400" />
            <line class="bottom" x1="-200" y1="200" x2="0" y2="200" />
            <line class="right" x1="200" y1="200" x2="200" y2="400" />
          </svg>
        </div>
      </div>
    </div>

  </body>
</html>
